<template>
  <div class="map-container">
    <div
      id="map"
      ref="mapContainer"
      class="map-content"
      style="height: calc(100vh - 125px)"
    />
    <div class="map-controls">
      <el-button @click="onHandleAddMarkers">添加标记点</el-button>
    </div>

    <!-- 新增进度提示区域 -->
    <div v-if="progress.show" class="progress-overlay">
      <div class="progress-card">
        <div class="progress-header">
          <i class="fa fa-spinner fa-spin mr-2" />
          <span>{{ progress.title }}</span>
        </div>
        <el-progress
          :percentage="progress.value"
          :status="progress.status"
          class="my-2"
        />
        <div class="progress-stats text-sm">
          <span>已处理: {{ progress.count }}/{{ progress.totalCount }}</span>
          <span class="ml-2">耗时: {{ progress.time }}ms</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from "vue";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet.markercluster/dist/MarkerCluster.css";
import "leaflet.markercluster/dist/MarkerCluster.Default.css";
import { ElProgress, ElMessage } from "element-plus";
import { useDataProcessor } from "@/hooks/useDataProcessor";
import { TileProvider, useMap } from "@/hooks/useMap";
import { useMarkers } from "@/hooks/useMarkers";

const mapContainer = ref();
// 使用地图hooks
const { map, initMap, setView, loadTileLayer } = useMap(mapContainer, {
  tileType: "gaode",
  tileOptions: { type: "vector", layerOptions: {} }
});
// 初始化标记管理hooks
const {
  init: initMarkers,
  addMarkers,
  clearMarkers
} = useMarkers(map, {
  cluster: true,
  clusterOptions: {
    onClick: (e: any) => {
      console.log("Marker clicked:", e);
    }
  }
});
let markerCluster: any = null;
interface status {
  success: "success";
  error: "error";
  warning: "warning";
  info: "info";
}
// 新增进度相关变量
const progress = reactive({
  show: false,
  value: 0,
  title: "加载中...",
  count: 0,
  totalCount: 0,
  time: 0,
  status: "info"
});
const { processData } = useDataProcessor();

// 模拟标记点数据
const markersData = [
  { lng: 116.39748, lat: 39.90882, name: "天安门" },
  { lng: 116.48105, lat: 39.92222, name: "北京东站" },
  { lng: 116.3375, lat: 39.92998, name: "北京西站" },
  { lng: 116.5972, lat: 39.9147, name: "北京南站" },
  { lng: 116.355, lat: 40.0805, name: "北京北站" }
];
onMounted(async () => {
  // 显示地图加载进度
  progress.show = true;
  progress.title = "地图加载中";
  progress.value = 0;
  progress.totalCount = 100;
  progress.count = 0;
  await initMap();

  // 模拟地图加载进度
  const mapLoadInterval = setInterval(() => {
    progress.value += Math.floor(Math.random() * 15);
    progress.count = progress.value;
    if (progress.value >= 80) {
      clearInterval(mapLoadInterval);
    }
  }, 300);
  // 初始化标记点集群
  initMarkers();
});

// 添加标记点
const onHandleAddMarkers = () => {
  clearMarkers();
  addMarkers(markersData);
};

onUnmounted(() => {
  if (map.value) {
    map.value.remove();
  }
});
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh;
  position: relative;
}

/* 新增进度提示样式 */
.progress-overlay {
  position: absolute;
  bottom: 160px;
  left: 20px;
  z-index: 2000;
}

.progress-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 12px 16px;
  width: 280px;
}

.progress-header {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.progress-stats {
  color: #606266;
  display: flex;
  justify-content: space-between;
}

/* 原有样式保持不变 */
.map-content {
  width: 100%;
  height: 100%;
}

.map-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  display: flex;
  gap: 10px;
}
</style>
